<template>
  <div class="dashboard-container">
    <el-header class="header">
      <!--      <el-row>
              <el-col :span="24" class="title">
                长春市照护保险综合服务平台
              </el-col>
            </el-row>-->
      <el-form ref="form" :model="form" :rules="rules" size="small" label-width="5%">
        <el-row type="flex" style="flex-direction: column;">
          <el-col style="width:100%">
            <el-row type="flex" justify="center" :align="'top'">
              <el-col :span="2">
                <el-form-item>
                  <!--                  <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="起始日期" style="width: 150px;"/>-->
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item>
                  <!--                  <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" format="yyyy-MM-dd" placeholder="起始日期" style="width: 150px;"/>-->
                </el-form-item>
              </el-col>
              <el-col :span="10" class="title">
                长春市长期护理保险综合服务平台
              </el-col>
              <el-col :span="4" />
            </el-row>
          </el-col>
        </el-row>
      </el-form>
    </el-header>
    <el-row type="flex" style="flex-direction: column;">
      <el-col style="width:100%">
        <el-row v-if="isshow" type="flex" justify="center" :align="'top'" class="layoutRow">
          <el-col :span="4" class="sborder">
            <span class="subTip">申请</span>
            <span class="subCnt">
              {{ sqrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="4" class="sborder">
            <span class="subTip">评估</span>
            <span class="subCnt">
              {{ pgrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="4" class="sborder">
            <span class="subTip">复核</span>
            <span class="subCnt">
              {{ fhrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="4" class="sborder">
            <span class="subTip">签约</span>
            <span class="subCnt">
              {{ qyrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="4" class="sborder">
            <span class="subTip">服务</span>
            <span class="subCnt">
              {{ fwrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="4" class="sborder">
            <span class="subTip">服务人次</span>
            <span class="subCnt">
              {{ fwrc }}
            </span>
            <span class="subTip">人</span>
          </el-col>
        </el-row>

        <el-row v-else type="flex" justify="center" :align="'top'" class="layoutRow">
          <el-col :span="6" class="sborder">
            <span class="subTip">申请</span>
            <span class="subCnt">
              {{ sqrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="6" class="sborder">
            <span class="subTip">评估</span>
            <span class="subCnt">
              {{ pgrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="6" class="sborder">
            <span class="subTip">复核</span>
            <span class="subCnt">
              {{ fhrs }}
            </span>
            <span class="subTip">人</span>
          </el-col>
          <el-col :span="6" class="sborder">
            <span class="subTip">机构正享受待遇</span>
            <span class="subCnt">
              {{ jgrc }}
            </span>
            <span class="subTip">人</span>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" :align="'top'" class="layoutRow">
          <el-col :span="7" class="sborder">
            <el-row type="flex" justify="start" style="flex-direction:row;height: 100%;">
              <el-col :span="12" style="width: 100%;margin-top: 20px;">
                <!-- 大屏左1(每月各区申请人数) -->
                <Bar1 ref="childBar1" />
              </el-col>
              <el-col :span="12" style="width: 100%;">
                <el-row type="flex" justify="start" class="flexWarp" style="flex-direction:column;height: 100%;">
                  <el-col :span="24" style="margin-top: 20px;">
                    <!-- 大屏左2(每月申请人数) -->
                    <lsPieLeft1 ref="childLsPieLeft1" />
                  </el-col>
                  <el-col :span="24" style="margin-top: 20px;">
                    <!-- 大屏左3(每月职工、居民的申请人数) -->
                    <lsPieLeft2 ref="childLsPieLeft2" />
                  </el-col>
                </el-row>
              </el-col>

            </el-row>
          </el-col>
          <el-col :span="9" class="sborder">

            <el-tabs v-model="activeName" style="color: white; caret-color: transparent;" @tab-click="handleClick">
              <el-tab-pane label="居家" name="first">
                <city-chart-home />
              </el-tab-pane>
              <el-tab-pane label="机构" name="second">
                <city-chart-org />
              </el-tab-pane>
            </el-tabs>
          </el-col>
          <el-col v-if="isshow" :span="4" class="sborder">
            <el-row type="flex" justify="start" style="flex-direction:column;height: 100%;">
              <el-col :span="24" style="width: 100%;">
                <el-row type="flex" justify="center" class="flexWarp">
                  <el-col :span="24" style="margin-top: 20px;">
                    <!-- 大屏右1(每月评估人数) -->
                    <lsPieRigth1 ref="childLsPieRigth1" />
                  </el-col>
                  <el-col :span="24" style="margin-top: 50px;">
                    <!-- 大屏右2(每月复核人数) -->
                    <lsPieRigth44 ref="childLsPieRigth44" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col v-else :span="4" class="sborder">
            <el-row type="flex" justify="start" style="flex-direction:column;height: 100%;">
              <el-col :span="24" style="width: 100%;">
                <el-row type="flex" justify="center" class="flexWarp">
                  <el-col :span="24" style="margin-top: 20px;">
                    <!-- 大屏右1(每月评估人数) -->
                    <lsPieRigth1 ref="childLsPieRigth1" />
                  </el-col>
                  <el-col :span="24" style="margin-top: 50px;">
                    <!-- 大屏右2(每月复核人数) -->
                    <lsPieRigth2 ref="childLsPieRigth2" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col v-if="isshow" :span="4" class="sborder">
            <el-row type="flex" justify="start" style="flex-direction:column;height: 100%;">
              <el-col :span="24" style="width: 100%;flex-grow: 1;">
                <el-row type="flex" justify="center" class="flexWarp">
                  <el-col :span="24">
                    <!-- 大屏左4(每月已签约人数) -->
                    <BarLeft4 ref="childBarLeft4" />
                  </el-col>
                  <el-col :span="24">
                    <!-- 大屏左5(每月已服务人数) -->
                    <BarLeft5 ref="childBarLeft5" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
          <el-col v-else :span="4" class="sborder">
            <el-row type="flex" justify="start" style="flex-direction:column;height: 100%;">
              <el-col :span="24" style="width: 100%;">
                <el-row type="flex" justify="center" class="flexWarp">
                  <el-col :span="24" style="margin-top: 20px;">
                    <!-- 机构各失能等级人员数量 -->
                    <lsPieRigth3 ref="childLsPieRigth3" />
                  </el-col>
                  <el-col :span="24" style="margin-top: 50px;">
                    <!-- 机构各参保类型人员数量 -->
                    <lsPieRigth4 ref="childLsPieRigth4" />
                  </el-col>
                </el-row>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row type="flex" justify="center" :align="'top'" class="layoutRow">
          <el-col :span="7" class="sborder">
            <AmountChart ref="childAmountChart" />
          </el-col>
          <el-col :span="9" class="sborder">
            <!-- 中间(每月已服务人数) -->
            <lsLineChart ref="childLsLineChart" />
          </el-col>
          <el-col :span="8" class="sborder">
            <HomeAreaBarChart ref="childHomeAreaBarChart" />
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CityChartHome from '@/components/Echarts/CityChartHome'
import CityChartOrg from '@/components/Echarts/CityChartOrg'
import Bar1 from '@/components/Echarts/LargeScreen/Bar1'
import lsPieLeft1 from '@/components/Echarts/LargeScreen/lsPieLeft1'
import lsPieLeft2 from '@/components/Echarts/LargeScreen/lsPieLeft2'
import BarLeft4 from '@/components/Echarts/LargeScreen/BarLeft4'
import BarLeft5 from '@/components/Echarts/LargeScreen/BarLeft5'
import HomeAreaBarChart from './dashboard/HomeAreaBarChart'
import lsLineChart from '@/components/Echarts/LargeScreen/lsLineChart'
import lsPieRigth1 from '@/components/Echarts/LargeScreen/lsPieRigth1'
import lsPieRigth2 from '@/components/Echarts/LargeScreen/lsPieRigth2'
import lsPieRigth3 from '@/components/Echarts/LargeScreen/lsPieRigth3'
import lsPieRigth4 from '@/components/Echarts/LargeScreen/lsPieRigth4'
import lsPieRigth44 from '@/components/Echarts/LargeScreen/lsPieRigth44'
import AmountChart from '@/components/Echarts/LargeScreen/AmountChart'
import { queryTop } from '@/api/business/largeScreen'
import { queryAll } from '@/api/business/gsgl'

export default {
  name: 'Visualization',
  components: {
    CityChartHome, CityChartOrg, HomeAreaBarChart, AmountChart,
    lsLineChart, lsPieRigth1, lsPieRigth2, lsPieRigth3, lsPieRigth4, Bar1,
    lsPieLeft1, lsPieLeft2, BarLeft4, BarLeft5, lsPieRigth44
  },
  data() {
    return {
      sqrs: 0,
      pgrs: 0,
      fhrs: 0,
      qyrs: 0,
      fwrs: 0,
      fwrc: 0,
      jgrc: 0,
      date: null,
      allGsgl: [],
      qymc: null,
      activeName: 'first',
      isshow: true
    }
  },
  created() {
    this.init('03')
    this.queryAll()
  },
  methods: {
    /**
     * 查询首页概况
     */
    init(zhlb) {
      queryTop({ zhlb: zhlb }).then(res => {
        console.log('queryTop:{}', res)
        this.sqrs = res.sqrs
        this.pgrs = res.pgrs
        this.fhrs = res.fhrs
        this.qyrs = res.qyrs
        this.fwrs = res.fwrs
        this.fwrc = res.fwrc
        this.jgrc = res.jgrc
      })
    },
    // 获取所有公司
    queryAll() {
      queryAll().then(res => {
        this.allGsgl = res
        console.log(this.allHljg)
      }).catch(() => { })
    },
    handleClick(tab, event) {
      console.log(tab.label)
      this.isshow = tab.label === '居家'
      const zhlb = tab.label === '居家' ? '03' : '01'
      const zhlb1 = tab.label === '居家' ? '14' : '4'
      const titleText = tab.label === '居家' ? '居家各节点汇总' : '机构各节点汇总'
      const queryCenter3Text = tab.label === '居家' ? '居家每月已服务人次' : '机构每月住院人次'
      console.log('zhlb:{}, zhlb1:{}, this.isshow:{}', zhlb, zhlb1, this.isshow)
      this.init(zhlb)
      this.$refs.childAmountChart.initChart(zhlb1)
      this.$refs.childBar1.initChart(zhlb)
      this.$refs.childLsPieLeft1.initChart(zhlb)
      this.$refs.childLsPieLeft2.initChart(zhlb)
      this.$refs.childLsLineChart.initChart(zhlb, queryCenter3Text)
      this.$refs.childHomeAreaBarChart.initChart(zhlb, titleText)
      if (this.isshow) {
        console.log('---------------------------------------------- ', this.isshow)
        setTimeout(() => {
          this.$refs.childBarLeft4.initChart(zhlb)
          this.$refs.childBarLeft5.initChart(zhlb)
          this.$refs.childLsPieRigth1.initChart(zhlb)
          this.$refs.childLsPieRigth44.initChart(zhlb)
        }, 500)
      } else {
        console.log('++++++++++++++++++++++++++++++++++++++++++++++ ', this.isshow)
        setTimeout(() => {
          this.$refs.childLsPieRigth3.initChart(zhlb)
          this.$refs.childLsPieRigth4.initChart(zhlb)
          this.$refs.childLsPieRigth1.initChart(zhlb)
          this.$refs.childLsPieRigth2.initChart(zhlb)
        }, 500)
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.header{
  height: auto !important;
  .title{
    text-align: center;
    color: #009ad6;
    font-size: 2.6rem;
    margin-top: 1.2rem;
    margin-bottom: 1.2rem;
  }
}
.dashboard-container{
  height: 100%;
  background-color: #1b315e;
}
.sborder{
  border: 0.1rem solid #009ad6;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 1rem;
  text-align: center;
}
.layoutRow{

  height: 100%;
  align-items: stretch;

}
.layoutColumn{

  align-items: baseline;
}
.tbrowclass{
  background-color: #1b315e;
}

tr{
  background-color: #1b315e !important;
}

.subTitle{
  width: 100%;
}

.subTip{
  font-size: 1.1rem;
  font-weight: 600;
  color: #94daf6;
}

.subCnt{
  font-size: 1.2rem;
  font-weight: 800;
  color: #ffffff;
}

.flexWarp{
  flex-wrap: wrap;
  height: 100%;
}

.projectStatus{
  height: 100%;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  text-align: center;
  padding: 1.5rem;
  color: #ffffff;
  font-size: 2rem;
  font-weight: 800;
}
.projectStatus1{
  color: #009ad6;
}
.projectInfo{
  color: #009ad6;
  margin-top: 0.8rem;
  font-size: 1.2rem;
}

::v-deep .el-tabs__content {
  overflow: visible;
}
::v-deep .el-tabs__item {
  color: white;
}
::v-deep .el-tabs__item.is-active {
  color: #009ad6;
  font-weight: 600;
}
::v-deep .el-icon-arrow-left {
  color: white;
}
::v-deep .el-icon-arrow-right {
  color: white;
}
::v-deep .el-tabs__nav-wrap::after {
  height: 0;
}
::v-deep .el-tabs__active-bar {
  background-color: #15cbf3;
}
</style>
